<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
      <tr>
        <th>苹果 ￥{{ price }} /斤,折扣&lt;{{ zhekou * 10 }} 折 &gt;</th>
      </tr>
      <tr>
        <td>
          <span>请输入您要购买的斤数:</span>
          <input type="number" v-model.number="count" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="btn">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>
          结账单:
          <span>总价: {{ allPrice }}元 </span>
          <span>折后价:{{ zhehoujia }}元</span>
          <span>省了：{{ savePrice }}元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10, //苹果价格
      zhekou: 0.8, //折扣
      count: 0, //斤数
      allPrice: 0, //总价
      zhehoujia: 0, //折后价
      savePrice: 0, //省了
    };
  },
  methods: {
    btn() {
      this.allPrice = this.price * this.count;
      this.zhehoujia = this.allPrice * this.zhekou;
      this.savePrice = this.allPrice - this.zhehoujia;
    },
  },
};
</script>

<style>
table {
  border: 1px solid #000;
  margin: 0 auto;
  text-align: center;
}
th {
  font-weight: 700;
}
td {
  /* font-weight: 700; */
  width: 800px;
  border: 1px solid #000;
}
</style>